<template>
  <div class="upload-border" @click="uploadRef.click()" v-if="!selectedImage">
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
      <path fill="rgb(123, 123, 123)"
        d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5c0-2.64-2.05-4.78-4.65-4.96M14 13v4h-4v-4H7l5-5l5 5z">
      </path>
    </svg>
    <p>将视频拖拽到此处，或<em>点击上传</em>！</p>
    <p style="font-size:12px">由于服务器资源有限，上传视频的大小不超过50MB！</p>
    <p style="font-size:12px; margin-bottom:10px">选择文件后可在控制台查看分片结果！</p>
  </div>
  <CaptureImage class="upload-img" :url="selectedImage" ref="captureImageRef" v-else></CaptureImage>
  <div class="upload-scroll">
    <div v-for="item in captureImgs" :key="item.key" class="img-box" :class="{ selected: selectedImage === item.url }">
      <img class="img-fit" :src="item.url" @click="selectedImage = item.url">
    </div>
  </div>
  <div class="upload-btn">
    <div class="upload-file-btn">
      <input ref="uploadRef" type="file" :accept="['.mp4', '.mov']" @change="handleAddFile" class="upload-input">
      <el-button class="btn" @click="uploadRef.click()">选择视频文件</el-button>
    </div>
    <el-button class="btn" @click="handleSave">保存</el-button>
  </div>
</template>

<script setup>
import { useVideoCapture } from '../hooks/useVideoCapture.js'
import CaptureImage from '@/components/captureImage/index.vue'
import { ref, watch } from 'vue'

const uploadRef = ref()
const captureImgs = ref([])
const selectedImage = ref('')
const emit = defineEmits(['save'])

const { currentFile, getVideoFrames, videoInfo } = useVideoCapture()

watch(captureImgs, (newVal) => {
  selectedImage.value = newVal[0]?.url
})

// 进行文件选择
const handleAddFile = async (e) => {
  try {
    if (e.target.files.length === 0) return
    currentFile.value = e.target.files[0]
    captureImgs.value = await getVideoFrames(currentFile.value, 10)
  } catch (error) {
    console.log(error)
  } finally {
    uploadRef.value.value = ''
  }
}

// 添加保存处理函数
const captureImageRef = ref()
const handleSave = async () => {
  if (captureImgs.value && captureImgs.value.length > 0) {
    const { url } = await captureImageRef.value.saveImage()
    emit('save', { url, video_duration: videoInfo.value.video_duration }, currentFile.value)
  } else {
    console.log('没有可用的图片')
  }
}
</script>

<style lang="scss" scoped>
.upload-border {
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin-bottom: 15px;
  border: 2px dashed #d9d9d9;
  transition: all, 0.3s;
  cursor: pointer;
}

.upload-border:hover {
  border: 2px dashed rgb(64, 158, 255);
}

.upload-border svg {
  width: 80px;
  height: 80px;
}

.upload-border em {
  color: #409eff;
  font-style: normal;
}

.upload-border input {
  display: none;
}
.upload-img {
  flex: 1;
  max-height: 70%;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
}

.upload-scroll {
  margin-top: 20px;
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding: 10px 0;

  &::-webkit-scrollbar {
    height: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
  }

  .img-box {
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.3s ease;

    &:hover {
      border-color: #1890ff;
      transform: translateY(-2px);
    }

    img {
      height: 100px;
      object-fit: cover;
      vertical-align: middle;
      cursor: pointer;
    }
  }

  .img-box.selected {
    border-color: #1890ff;
    transform: translateY(-2px);
  }
}

.upload-btn {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;

  .upload-file-btn {
    position: relative;
  }

  .upload-input {
    display: none;
  }
}
</style>